import React from 'react';
import { Typography } from 'antd';
import classNames from 'classnames';
import styles from './style.less';

/**
 * @param {*} data [{title:'',content:[{label:'',value:''}]},{title:'',content:[{label:'',value:''}]}]
 * @returns
 */
const DiffContent = props => {
    const { data = [] } = props;
    const [left, right] = data;

    const getSubContent = subData => {
        const gradeDesc = subData[subData.length - 1];
        const haveValueTitle = !!(gradeDesc.isValueTitle && gradeDesc.value);
        return (
            <div>
                {haveValueTitle && (
                    <Typography.Paragraph style={{ whiteSpace: 'pre-line' }}>{gradeDesc.value}</Typography.Paragraph>
                )}
                <ul
                    className={styles.value}
                    // style={{ marginLeft: haveValueTitle && '2rem', marginTop: haveValueTitle ? '-5px' : '3px' }}
                >
                    {subData
                        .filter(item => !item.isValueTitle)
                        .map(item => (
                            <li
                                className={classNames(styles.subValue, {
                                    [styles.isDeleted]: item.isDeleted,
                                    [styles.isChanged]: item.isChanged
                                })}
                            >
                                <span
                                    className={classNames(styles.label, styles.subLabel, {
                                        [styles.isDeleted]: item.isDeleted
                                    })}
                                >
                                    {item.label}
                                </span>
                                <span>{item.value}</span>
                            </li>
                        ))}
                </ul>
            </div>
        );
    };

    const getContent = contentData => (
        <div className={styles.content}>
            {contentData &&
                contentData.map(item => (
                    <>
                        <div
                            className={classNames(styles.item, {
                                [styles.isDark]: item.isDeleted,
                                [styles.isChanged]: item.isEdit && item.isChanged
                            })}
                            key={item.label}
                        >
                            <div
                                className={classNames({
                                    [styles.label]: !item.isDeleted,
                                    [styles.isDeleted]: item.isDeleted && item.level !== 1
                                })}
                                style={{
                                    // minWidth: item.level === 2 ? '130px' : '100px',
                                    minWidth: '100px',
                                    fontWeight: item.level === 2 ? 'bold' : 'normal',
                                    textAlign: 'right'
                                }}
                            >
                                {item.label}
                            </div>
                            {Array.isArray(item.value) ? (
                                getSubContent(item.value)
                            ) : (
                                <div
                                    className={classNames({
                                        [styles.isDeleted]: item.isDeleted
                                    })}
                                >
                                    <div
                                        style={{ whiteSpace: item.level === 2 ? 'nowrap' : 'pre-line' }}
                                        className={classNames(styles.heightLight, {
                                            [styles.value]: !item.isDeleted
                                        })}
                                    >
                                        {item.value}
                                    </div>
                                </div>
                            )}
                        </div>
                        {/* {item.label === '职级定义：' && contentData.length > 4 && <Divider />} */}
                    </>
                ))}
        </div>
    );

    const contentBlock = blockData => (
        <div className={styles.contentBlock}>
            <div className={styles.title}>{blockData.title}</div>
            {getContent(blockData.content)}
        </div>
    );

    return (
        <div className={styles.wrap}>
            {left && contentBlock(left)}
            {right && (
                <>
                    <div className={styles.divider} />
                    {contentBlock(right)}
                </>
            )}
        </div>
    );
};

export default DiffContent;
